<template>
    <aside class="asideMenus">
        <div class="menuCtrl">
            <img src="@/assets/imgs/icons/sidbar.png" @click="isCollapse=!isCollapse" class="collBtn" alt=""/>
        </div>
        <el-menu
            active-text-color="#E6A23C"
            background-color="#4A4F5B"
            class="fAside-menu"
            :style="{width: !isCollapse?'240px':'64px'}"
            default-active="2"
            text-color="#fff"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose">
                <template v-for="aItem in menuList">
                    <el-submenu v-if="aItem.children&&aItem.children.length" :key="aItem.id" :index="aItem.id">
                        <template slot="title">
                            <i :class="aItem.icon" style="color:#fff;"></i>
                            <span class="">{{ aItem.name }}</span>
                        </template>
                        <el-menu-item v-for="bItem in aItem.children" @click="gotoPage(bItem)" :key="bItem.id" :index="bItem.id">
                            <span>{{ bItem.name }}</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-menu-item v-else @click="gotoPage(aItem)" :index="aItem.id">
                        <i :class="aItem.icon" style="color:#fff;"></i>
                        <span>{{ aItem.name }}</span>
                    </el-menu-item>
                </template>
        </el-menu>
    </aside>
</template>
<script>
export default{
    data(){
        return {
            isCollapse: false,
            iconFlg: 'Expand',
            menuName: '首页',
            menuList: [
                {
                    icon: 'el-icon-setting',
                    id: 'a1',
                    name: '首页',
                    path: '/search',
                    active: false,
                },
                {
                    icon: 'el-icon-setting',
                    id: '1',
                    name: '基础 Basic',
                    path: '',
                    active: false,
                    children: [
                        {
                            icon: '',
                            id: '16',
                            name: '封装接口调用',
                            path: '/search',
                            active: false
                        },
                    ]
                }
            ]
        }
    },
    methods: {
        handleOpen(key, keyPath){
            console.log(key, keyPath)
        },
        handleClose(key, keyPath){
            console.log(key, keyPath)
        },
        gotoPage(menuObj){
            if(menuObj.path){
                menuName.value = menuObj.name
                router.push(menuObj.path)
                this.$emits('changeUrl', menuName.value)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.asideMenus{
    .menuCtrl{
        position: absolute;
        height: 50px;

        .collBtn{
            position: absolute;
            top: 16px;
            left: 26px;
            width: 20px;
            height: 20px;
            font-size: 24px;
            color: #fff;
            cursor: pointer;
        }
    }
    .fAside-menu{
        margin-top: 50px;
        border-right: 1px solid #545c64;
    }
}
</style>